<template>
	<view id="container">
		<!-- 用户信息 -->
		<ABanner :isSeach="false"></ABanner>
		<view @click="()=>{show1=true}" class="tip">
			帮助
		</view>
		<!-- 经期日历展示 -->
		<view class="calendar">
			<!-- 月份选择器 -->
			<u-datetime-picker :show="show" v-model="yearMonth" mode="year-month" @confirm='handlePicker'
				@cancel="show=false"></u-datetime-picker>
			<!-- 选择月份 -->
			<view class="header">
				<button class="button" @click="handleChangeMonth">{{year}}年 <u-icon class="icon" name="arrow-down"></u-icon> </button>
				<button class="button" @click="handleChangeMonth">{{month}}月 <u-icon class="icon" name="arrow-down"></u-icon> </button>
			</view>
			<!-- 星期栏 -->
			<view class="week">
				<view class="week-day" v-for="(item, index) in weekDay" :key="index">{{ item }}</view>
			</view>
			<!-- 日历数字 -->
			<view class="content" :style="{ height: height }">
				<view :style="{ top: positionTop + 'rpx' }" class="days">
					<view class="item" v-for="(date,index) in dates" :key="index">
						<view @longpress="selectAny(date, $event)" class="day" @click.stop="selectOne(date, $event)" :class="{
								choose: isChoose(date),//选中的日期
								period:isPeriod(date),// 经期日期
								forecast:isForecast(date),// 未来日期
								nolm: isNolm(date),// 非本月
								work: isWorkDay(date),//周一至周五
								ovulationDay:isOvulationDay(date),
								luteal:isLuteal(date),// 黄体期
								follicle:isFollicle(date),// 
								ovulationTime: isOvulationTime(date),// 排卵期
							}">
							<view>
								{{Number(date.date)}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="icon">
				<view class="icon-item" v-for="icon in iconList">
					<image :src="icon.icon"></image>
					{{icon.title}}
				</view>
			</view>
		</view>
		<view class="notice">
			<scroll-view  scroll-x="true" class="swiper" :scroll-left="scrollLeft">
				<view class="swiper-item" :class="{'today' : isToday(date)}" v-for="(date,index) in dates" :key="index">
					<view v-if="isToday(date)">
						今天（{{date.month}}月{{date.date}}日）
					</view>
					<view v-else>
						{{dayFormat(date.day)}}（{{date.month}}月{{date.date}}日）
					</view>
				</view>
			</scroll-view>
			<view v-if="toPeriodDay" class="title">
				经期第{{toPeriodDay}}天
			</view>
			<view v-if="endPeriodDay" class="title gray">
				预计在{{endPeriodDay}}结束
			</view>
		</view>
		<!-- 经期信息填写 -->
		<view class="record">
			<view class="menstrual">
				<view class="title">
					<img
						src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/30476b65a4e34b18b86d6c9c4280e58dmwphn87809.png"
						alt="" />
					<text space="emsp">月经到访</text>
				</view>
				<view class="message">
					<view
						style="border-radius: 15rpx;background-color: #DBDBDB;width: 168rpx;height: 50rpx;display: flex;flex-direction: row;">
						<button :class="isYes ? 'yes' : 'no'" :disabled="isYes" @click="menstrualYes">是</button>
						<button :class="isYes ? 'no' : 'yes'" :disabled="!isYes" @click="menstrualNo">否</button>
					</view>
				</view>
			</view>
			<view v-if="clickDay">
				<view class="flow">
					<view class="title">
						<img
							src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/833915ab655148f2985df563b2f532cerq01ufcq4u.png" />
						<text space="emsp">流量</text>
					</view>
					<view class="message">
						<u-slider @changing='handleFlow' :value="form.flow" class="slider" activeColor='#f86853'
							inactiveColor='#f86853' step='25' blockColor="#f86853"></u-slider>
					</view>
				</view>
				<view class="color">
					<view class="title">
						<img
							src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/906f4347c1874d8c9aabea779c80444fohme136py6.png" />
						<text space="emsp">颜色</text>
					</view>
					<view class="message">
						<view class="coloritem" v-for="(img,index) in colorimages" :key="index">
							<view :class="{colorCheck:form.colour==img.color}" class="colorValue" @click="colorMessage(img,index)"
								:style="{backgroundColor:img.style}" :id="img.color"></view>
						</view>
					</view>
				</view>
				<view class="dysmenorrhea">
					<view class="title">
						<img style="width: 24rpx;height: 38rpx;margin-left: 7rpx; margin-right: 25rpx;"
							src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/64fe6578cbd349f1b8c1e8f09b00a5a6pcdeu4wnhs.png"
							alt="" />
						<text space="emsp">痛经</text>
					</view>
					<view class="message">
						<view class="dysmenorrheaitem" v-for="(dys,index) in dysmenorrheaimages" :key="index">
							<view @click="dysmenorrheaMessage(dys)" :id="dys.dys">
								<img :src="dys.src" style="width: 40rpx;height: 40rpx;margin-top: 5rpx;" alt="">
								<view :class="{dysmenorrheaitemCheck:form.painIntensity==dys.dys}"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="feeling">
					<view class="title">
						<img
							src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/8b96502645c344efaef86faa333cc4681zyw339hxa.png"
							alt="" />
						<text space="emsp">心情&其他症状</text>
					</view>
					<view class="message">
						<textarea @input="moodMessage" v-model="form.mood" />
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal @confirm="()=>show1=false" :show="show1" title="经期操作说明"
		content='首先可以在个人主页中的经期设置中设置经期长度与周期,长度即为默认经期的时间长度,周期即为预期经期距离用户设置的经期的时间'></u-modal>
	</view>
</template>

<script>
	import "../period/static/font-icon.css"
	import {
		addMenstruation,
		addrecordDailys,
		delMenstruation,
		getEarliestRecordMonth,
		getForecastMenstruation,
		getMenstruation,
		getOtherPeriod,
		getPeriod,
		getrecordDaily,
		updaterecordDailys
	} from '@/api/period';
	import {
		mapGetters
	} from 'vuex'
	
	export default {
		data() {
			return {
				show1:false,
				scrollLeft:0,
				weekstart: 0,
				chooseDays: [],
				clickDay: null,
				forecastDays: [],
				chooseDays: [],
				ovulationDays: [],
				follicleDays: [],
				lutealDays: [],
				toPeriodDay:null,
				endPeriodDay:null,
				weektext: ['日', '一', '二', '三', '四', '五', '六'],
				show: false,
				disabledAfter: true,
				yearMonth: new Date(),
				year: null, // 年
				month: null, // 月
				day: null, // 日
				dates: [], // 当前月的日期数据
				isHistory: null,
				positionTop: 0,
				formIschange: false,
				show: false,
				periodLong: 5,
				cycleLong: 28,
				current: '',
				form: {
					id: null,
					year: '',
					month: '',
					day: '',
					flow: '',
					colour: '',
					painIntensity: '',
					mood: '',
				},
				submit: 0,
				submitSysle: false,
				menstrualVisit: '月经到访',
				iconList: [{
					icon: "https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/9eaea6936eb44ce9b5a55e33ad9b00fffz2db5sl3r.png",
					title: "经期",
				}, {
					icon: "https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/889641dfd4414b48b16cffe2a56caa577uyw2uqyhm.png",
					title: "排卵期",
				}, {
					icon: "https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/3cefd993a5944acd91ba848b65ead464x5s2xopl0c.png",
					title: "卵泡期",
				}, {
					icon: "https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/8013f5cb8be24b25b51f94fb050a2861svdw7y3qat.png",
					title: "黄体期",
				}, {
					icon: "https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/a11f41618db547b0a3b1dd79dcd42e279scfjyulnq.png",
					title: "排卵日",
				}],
				colorimages: [{
						color: '1',
						style: '#EA686B'
					},
					{
						color: '2',
						style: '#A60817'
					},
					{
						color: '3',
						style: '#80150F'
					},
					{
						color: '4',
						style: '#B59172'
					},
					{
						color: '5',
						style: '#63302B'
					}
				],
				dysmenorrheaimages: [{
						src: 'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/0a15bdd931614e15a9aa6f01134853ect1vmzhv8q0.png',
						dys: '1'
					},
					{
						src: 'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/977f4d7f7348483daae4c41fc487a7497e5yqenxqt.png',
						dys: '2'
					},
					{
						src: 'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/a08a725bb0744b4b81df94dcee7b343dyop8g38dju.png',
						dys: '3'
					},
					{
						src: 'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/00cbff6efe924e78a153d9076dd677cek5ouovlgvp.png',
						dys: '4'
					},
					{
						src: 'https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/f3b3e14e2e294b75ac0c046759c11fcas9gyl8v0tk.png',
						dys: '5'
					}
				],
			}
		},
		watch: {
			month() {
				this.monthDay(this.year, this.month);
				this.getPeriodDay()
			},
			clickDayObj: {
				handler(newVal, oldVal) {
					// 当表单数据变化，并且上一次点击了日期提交表单
					if (oldVal && this.formIschange)
						// 提交表单信息
						this.submitForm(oldVal)

					if (!newVal) return
					// 单选点击
					if (newVal.year.length == 1) {
						// 获取日期的经期信息
						this.getrecord()
						// 多选点击
					} else if (newVal.year.length == 2) {
						this.chooseDays.forEach(item => {
							// 查找多选的日期匹配的经期信息
							if (parseInt(item.startDay.split('-')[0]) == newVal.year[0] &&
								parseInt(item.startDay.split('-')[1]) == newVal.month[0] &&
								parseInt(item.startDay.split('-')[2]) == newVal.day[0]) {
								let epMenstrualPeriodCalendars = item.epMenstrualPeriodCalendars.map(item => {
									return JSON.stringify({
										colour: item.colour,
										flow: item.flow,
										mood: item.mood,
										painIntensity: item.painIntensity
									})
								})
								// 判断经期信息是否一致
								let set = new Set(epMenstrualPeriodCalendars)
								if (set.size == 1) {
									let record = null
									set.forEach(item => {
										record = JSON.parse(item)
									})
									// 控制数据新增还是修改（利用是否有id）
									if (record.colour != null || record.flow != null || record.mood != null || record.painIntensity !=
										null) {
										record = {
											...record,
											id: 0
										}
									}
									// 一致则展示表单
									this.form = record
									this.formIschange = false
								} else {
									// 不一致则展示图表
									let epMenstrualPeriodCalendars = item.epMenstrualPeriodCalendars
									// TODO 展示多选日期的图表
								}
							}
						})
					}
				}
			},
		},
		computed: {
			...mapGetters(['uid']),
			weekDay() {
				return this.weektext.slice(this.weekstart).concat(this.weektext.slice(0, this.weekstart));
			},
			height() {
				return (this.dates.length / 7) * 80 + 'rpx';
			},
			isYes() {
				if (!this.clickDay) return false
				let flag = false
				for (let i = 0; i < this.chooseDays.length; i++) {
					let item = this.chooseDays[i]
					let start = item["startDay"]
					let end = item["endDay"]
					if (this.clickDay[0] <= end && this.clickDay[0] >= start) flag = true
				}
				return flag
			},
			clickDayObj() {
				if (!this.clickDay) {
					return null
				}
				if (this.clickDay[0] == this.clickDay[1]) {
					let clickDayArr = this.clickDay[0].split("-")
					return {
						year: [clickDayArr[0]],
						month: [parseInt(clickDayArr[1])],
						day: [parseInt(clickDayArr[2])],
					}
				} else {
					let clickDayStartArr = this.clickDay[0].split('-')
					let clickDayEndArr = this.clickDay[1].split('-')
					return {
						year: [clickDayStartArr[0], clickDayEndArr[0]],
						month: [parseInt(clickDayStartArr[1]), parseInt(clickDayEndArr[1])],
						day: [parseInt(clickDayStartArr[2]), parseInt(clickDayEndArr[2])],
					}
				}
			}
		},
		onLoad() {
			this.getHistory()
			// this.getPeriodDay()
		},
		mounted() {
			setTimeout(()=>{
				const query = uni.createSelectorQuery().in(this);
				query.select(".today").boundingClientRect(data=>{
					console.log(data)
					setTimeout(()=>{
						this.scrollLeft = data.left - 125
					},200)
				}).exec()
			},200)
		},
		onHide() {
			this.clickDayObj = null
			this.clickDay = null
		},
		onShow() {
			this.clickDayObj = null
			this.clickDay = null
		},
		methods: {
			// 获取经期to,end天数
			getPeriodToEnd(){
				getPeriod().then(res=>{
					if(res.data){
						this.toPeriodDay= res.data['今天是第*天']
						this.endPeriodDay= res.data['预计在'].split('-')[1] + '-' +  res.data['预计在'].split('-')[2]
					}else{
						this.endPeriodDay=null
						this.toPeriodDay=null
					}
				})
			},
			//获取经期信息
			getrecord() {
				getrecordDaily(this.clickDayObj).then(res => {
					this.form = res.data ? {
							...res.data,
							flow: res.data.flow * 25
						} : {
							id: null,
							year: '',
							month: '',
							day: '',
							flow: 0,
							colour: '',
							painIntensity: '',
							mood: '',
						},
						this.formIschange = false
				})
			},
			// 监听年月变化
			handlePicker({value}) {
				this.show = false
				this.year = new Date(value).getFullYear()
				this.month = new Date(value).getMonth() + 1
				this.clickDay = null
				this.clickDayObj = null
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select(".today").boundingClientRect(data=>{
						console.log(data)
						setTimeout(()=>{
							this.scrollLeft = data.left - 125
						},200)
					}).exec()
				},200)
			},
			// 提交表单
			submitForm(clickDayObj) {
				if (this.form.id == null) {
					addrecordDailys({
						...this.form,
						...clickDayObj
					}).then(res => {
						// uni.showToast({
						// 	title: "添加成功"
						// })
					})
				} else {
					updaterecordDailys({
						...this.form,
						...clickDayObj
					}).then(res => {
						// uni.showToast({
						// 	title: "添加成功"
						// })
					})
				}
			},
			// 设置颜色
			colorMessage(img, e) {
				this.form.colour = img.color
				this.formIschange = true
			},
			// 设置痛经
			dysmenorrheaMessage(dys) {
				this.form.painIntensity = dys.dys
				this.formIschange = true
			},
			// 设置流量
			handleFlow(item) {
				this.form.flow = item / 25
				this.formIschange = true
			},
			// 设置心情
			moodMessage() {
				this.formIschange = true
			},
			// 获取经期数据
			getPeriodDay() {
				this.getForecastDays()
				this.getMenstruationDays()
				this.getPeriodToEnd()
				this.getOtherPeriodDays()
			},
			// 切换月经到访
			menstrualYes() {
				if (!this.clickDay) {
					this.$refs.uToast.show({
						message: '请选择日期'
					})
					return
				}
				addMenstruation(this.clickDayObj).then(res => {
					this.getPeriodDay()
					this.getPeriodToEnd()
				})
			},
			menstrualNo() {
				delMenstruation(this.clickDayObj).then(res => {
					this.getPeriodDay()
					this.getPeriodToEnd()
					this.getrecord()
				})
			},
			// 获取其余三个经期数据
			getOtherPeriodDays() {
				getOtherPeriod({
					year: this.year,
					month: this.month
				}).then(res => {
					this.follicleDays = []
					this.ovulationDays = []
					this.lutealDays = []
					res.data.map(item=>{
						if(item.follicularPhase){
							this.follicleDays.push(item.follicularPhase)
						}
						if(item.ovulationPhase){
							this.ovulationDays.push(item.ovulationPhase)
						}
						if(item.lutealPhase){
							this.lutealDays.push(item.lutealPhase)
						}
					})
				})
			},
			// 获取经期数据
			getMenstruationDays() {
				getMenstruation({
					year: this.year,
					month: this.month
				}).then(res => {
					this.chooseDays = res.data
				})
			},
			// 是否为排卵日
			isOvulationDay({year,month,date}) {
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.ovulationDays.length; i++) {
					let item = this.ovulationDays[i]
					if (day == item['day']) flag = true
				}
				return flag
			},
			// 是否为黄体期
			isLuteal({year,month,date}){
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.lutealDays.length; i++) {
					let item = this.lutealDays[i]
					let start = item["lutealPhaseStart"]
					let end = item["lutealPhaseEnd"]
					if (day <= end && day >= start) flag = true
				}
				return flag
			},
			isFollicle({year,month,date}){
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.follicleDays.length; i++) {
					let item = this.follicleDays[i]
					let start = item["follicularPhaseStart"]
					let end = item["follicularPhaseEnd"]
					if (day <= end && day >= start) flag = true
				}
				return flag
			},
			// 是否为排卵期
			isOvulationTime({year,month,date}) {
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.ovulationDays.length; i++) {
					let item = this.ovulationDays[i]
					let start = item["ovulationPhaseStart"]
					let end = item["ovulationPhaseEnd"]
					if (day <= end && day >= start) flag = true
				}
				return flag
			},
			// 是否为选中
			isChoose({year,month,date}) {
				let day = `${year}-${month}-${date}`
				if (!this.clickDay) return false
				return day >= this.clickDay[0] && day <= this.clickDay[1]
			},
			//是否为经期日期
			isPeriod({year,month,date}) {
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.chooseDays.length; i++) {
					let item = this.chooseDays[i]
					let start = item["startDay"]
					let end = item["endDay"]
					if (day <= end && day >= start) flag = true
				}
				return flag
			},
			// 是否为预测日期
			isForecast({year,month,date}) {
				let day = `${year}-${month}-${date}`
				let flag = false
				for (let i = 0; i < this.forecastDays.length; i++) {
					let item = this.forecastDays[i]
					let start = item["start"]
					let end = item["end"]
					if (day <= end && day >= start) flag = true
				}
				return flag
			},
			// 是否本月
			isNolm({month}) {
				return this.month != month
			},
			//是否工作日
			isWorkDay({year,month,date}) {
				let day = `${year}/${month}/${date}`;
				let formatDY = new Date(day.replace(/-/g, '/'));
				let week = formatDY.getDay();
				if (week == 0 || week == 6) {
					return false;
				} else {
					return true;
				}
			},
			//是否未来日期
			isFutureDay({year,month,date}) {
				let day = `${year}/${month}/${date}`;
				let formatDY = new Date(day.replace(/-/g, '/'));
				let showTime = formatDY.getTime();
				let curTime = new Date().getTime();
				if (showTime > curTime) {
					return true;
				} else {
					return false;
				}
			},
			// 是否为当天
			isToday({year,month,date}) {
				let checkD = year + '-' + month + '-' + date;
				let today = this.getToday().date;
				if (checkD == today) {
					return true;
				} else {
					return false;
				}
			},
			// 获取今日
			getToday() {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth();
				let d = date.getDate();
				let week = new Date().getDay();
				let weekText = ['日', '一', '二', '三', '四', '五', '六'];
				let formatWeek = '星期' + weekText[week];
				let today = {
					date: y + '-' + this.formatNum(m + 1) + '-' + this.formatNum(d),
					week: formatWeek
				};
				return today;
			},
			// 获取历史数据
			getHistory() {
				getEarliestRecordMonth().then(res => {
					this.year = res.data ? res.data['年'] : new Date().getFullYear()
					this.month = res.data ? res.data['月'] : new Date().getMonth() + 1
					this.year = parseInt(this.year)
					this.month = parseInt(this.month)
					// this.yearMonth = Date.parse(this.year + '-' + this.month) -28800000;
					if (!res.data) {
						this.$refs.uToast.show({
							message: '无历史数据\n自动跳转到本月'
						})
						this.isHistory = false
					} else {
						this.$refs.uToast.show({
							message: '存在历史数据\n跳转到历史最新数据'
						})
						this.isHistory = true
					}
					// 获取日历数据
					this.monthDay();
					this.getPeriodDay()
				})
			},
			// 点击日历日期
			selectOne(i, event) {
				let date = `${i.year}-${i.month}-${i.date}`;
				let selectD = new Date(new Date(date).setHours(0, 0, 0, 0)).getTime();
				let curTime = new Date().getTime();
				let week = new Date(date).getDay();
				let weekText = ['日', '一', '二', '三', '四', '五', '六'];
				let formatWeek = '星期' + weekText[week];
				if (selectD > curTime && this.disabledAfter) {
					this.$refs.uToast.show({
						title: 'error',
						type: 'error',
						message: '未来日期不可选'
					});
					return false;
				}
				this.clickDay = [date, date]
			},
			// 长按多选
			selectAny(i) {
				let date = `${i.year}-${i.month}-${i.date}`;
				this.chooseDays.forEach(item => {
					if (date <= item.endDay && date >= item.startDay) {
						this.clickDay = [item.startDay, item.endDay]
						return
					}
				})
			},
			// 获取预期经期
			getForecastDays() {
				getForecastMenstruation({
					year: this.year,
					month: this.month
				}).then(res => {
					// 预计经期日期
					this.forecastDays = res.data ? res.data.period : []
				})
			},
			// 格式化日期数据
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			// 获取本月日期数据
			monthDay() {
				let dates = [];
				let firstDayOfMonth = new Date(this.year, this.month - 1, 1).getDay(); // 当月第一天星期几
				let lastDateOfMonth = new Date(this.year, this.month, 0).getDate(); // 当月最后一天
				let lastDayOfLastMonth = new Date(this.year, this.month - 2, 0).getDate(); // 上一月的最后一天
				let weekstart = this.weekstart == 7 ? 0 : this.weekstart;
				let startDay = (() => {
					// 周初有几天是上个月的
					if (firstDayOfMonth == weekstart) {
						return 0;
					} else if (firstDayOfMonth > weekstart) {
						return firstDayOfMonth - weekstart;
					} else {
						return 7 - weekstart + firstDayOfMonth;
					}
				})();
				let endDay = 7 - ((startDay + lastDateOfMonth) % 7); // 结束还有几天是下个月的
				for (let i = 1; i <= startDay; i++) {
					dates.push({
						date: this.formatNum(lastDayOfLastMonth - startDay + i),
						day: weekstart + i - 1 || 7,
						month: this.month - 1 >= 1 ? this.formatNum(this.month - 1) : 12,
						year: this.month - 1 >= 1 ? this.year : this.year - 1
					});
				}
				for (let j = 1; j <= lastDateOfMonth; j++) {
					dates.push({
						date: this.formatNum(j),
						day: (j + firstDayOfMonth - 1) % 7 || 7,
						month: this.formatNum(this.month),
						year: this.year,
						isCurM: true, //是否当前月份
					});
				}
				for (let k = 1; k <= endDay; k++) {
					dates.push({
						date: this.formatNum(k),
						day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
						month: this.month + 1 <= 12 ? this.formatNum(this.month + 1) : '01',
						year: this.month + 1 <= 12 ? this.year : this.year + 1
					});
				}
				this.dates = dates;
			},
			// 格式化星期
			dayFormat(day) {
				switch (day) {
					case 1:
						return '周一'
					case 2:
						return '周二'
					case 3:
						return '周三'
					case 4:
						return '周四'
					case 5:
						return '周五'
					case 6:
						return '周六'
					case 7:
						return '周日'
				}
			},
			// 获取经期日期数据
			handleMonth(chooseDays) {
				this.chooseDays = chooseDays
			},
			handleChangeMonth() {
				this.show = true
			},
		},
	}
</script>

<style scoped lang="scss">
	.tip{
		position: absolute;
		right: 40rpx;
		top: 60rpx;
		display: flex;
		align-items: center;
		z-index: 100;
		color:#fca4a4;
		font-size: 40rpx;
	}
	#container {
		position: relative;
		.calendar {
			width: 690rpx;
			display: flex;
			flex-direction: column;
			margin: 20rpx auto;
			margin-top: -55rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			color: #6f6d6d;
			font-size: 28rpx;
			text-align: center;


			.header {
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 88rpx;
				color: #42464A;
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 2rpx solid #f2f2f2;
				
				button{
					width: 250rpx;
					display: flex;
					justify-content: space-around;
					background-color: #fdeeef;
					padding: 20rpx 40rpx;
				}
				
				.pre,
				.next {
					font-size: 28rpx;
					padding: 8rpx 15rpx;
					border-radius: 10rpx;
					// border: 2rpx solid #dcdfe6;
				}

				.pre {
					margin-right: 30rpx;
				}

				.next {
					margin-left: 30rpx;
				}
			}

			.week {
				display: flex;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

				view {
					flex: 1;
				}
			}

			.content {
				position: relative;
				overflow: hidden;
				transition: height 0.4s ease;
				font-family: 'AliHYAiHei', sans-serif;
				color: #000;

				.days {
					transition: top 0.3s;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;

					.item {
						position: relative;
						display: block;
						height: 80rpx;
						line-height: 80rpx;
						width: calc(100% / 7);

						.day {
							box-sizing: content-box;
							font-size: 32rpx;
							font-style: normal;
							display: inline-block;
							vertical-align: middle;
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							overflow: hidden;
							padding: 16rpx;

							&.choose {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/491f020f6f5144c69aa4d24cc398bdddbt1vgx7zk6.png') !important;
								background-size: 100% 100% !important;
							}

							&.period {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/9eaea6936eb44ce9b5a55e33ad9b00fffz2db5sl3r.png');
								background-size: 70% 80%;
								background-repeat: no-repeat;
								background-position: center 0rpx;
								color: #000 !important;
							}

							&.ovulationTime {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/889641dfd4414b48b16cffe2a56caa577uyw2uqyhm.png');
								background-size: 85% 85%;
								background-repeat: no-repeat;
								background-position: center 5rpx;
								color: #000 !important;
							}

							&.follicle {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/3cefd993a5944acd91ba848b65ead464x5s2xopl0c.png');
								background-size: 80% 85%;
								background-repeat: no-repeat;
								background-position: center 0;
								color: #000 !important;
							}

							&.luteal {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/8013f5cb8be24b25b51f94fb050a2861svdw7y3qat.png');
								background-size: 85% 85%;
								background-repeat: no-repeat;
								background-position: center center;
								color: #000 !important;
							}

							&.forecast {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/812ae8a536dc45a8b7cc798df0c93b4fjlrvjbmiqq.png');
								background-size: 87% 87%;
								background-repeat: no-repeat;
							}

							&.nolm {
								color: #d4d4d4;
							}

							&.ovulationDay {
								background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/a11f41618db547b0a3b1dd79dcd42e279scfjyulnq.png');
								background-size: 100% 100%;
							}

						}

						.workDay {
							color: #25272a;
						}

						.notSigned {
							font-style: normal;
							width: 8rpx;
							height: 8rpx;
							background: #fa7268;
							border-radius: 10rpx;
							position: absolute;
							left: 50%;
							bottom: 0;
							pointer-events: none;
						}

						.today {
							color: #fff;
							background-color: #a0eac1;
						}

						.workDay {
							font-style: normal;
							width: 8rpx;
							height: 8rpx;
							background: #4d7df9;
							border-radius: 10rpx;
							position: absolute;
							left: 50%;
							bottom: 0;
							pointer-events: none;
						}

						.markDays {
							font-style: normal;
							position: absolute;
							top: 2rpx;
							right: 11rpx;
							pointer-events: none;
							font-size: 80rpx;
							color: rgba(160, 234, 193, 0.5);
						}
					}
				}
			}

			.icon {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				font-size: 24rpx;

				.icon-item {
					display: flex;
					align-items: center;
					height: 40rpx;

					&:first-child {

						image {
							width: 32rpx;
							height: 100%;
							margin-right: 10rpx;
						}
					}

					image {
						width: 40rpx;
						height: 100%;
						margin-right: 10rpx;
					}
				}
			}
		}

		.notice {
			position: relative;
			margin: 10rpx 30rpx;
			height: 240rpx;
			border-radius: 20rpx;
			padding: 0 20rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/297966a834444390be4cac85802596789206sv40th.png');

			.title {
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
				font-size: 48rpx;
				top: 85rpx;
				font-weight: 700;
				letter-spacing: 12rpx;
			}
			
			.gray{
				top: 168rpx;
				font-size: 29rpx;
				font-weight: 400;
				color: #b4b1b1;
				letter-spacing: 0rpx;
			}
			
			.swiper{
				white-space: nowrap;
				width: 100%;
				height: 60rpx;
				padding: 24rpx 0;
				font-size: 32rpx;
				
				.swiper-item{
					width: 300rpx;
					display: inline-block;
					
					view{
						width: 300rpx;
					}
				}
			}
		}

		.notice::after {
			content: "";
			position: absolute;
			left: 50rpx;
			bottom: -4rpx;
			width: 180rpx;
			height: 168rpx;
			background-repeat: no-repeat;
			background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/3039fcb8056d4412bd685f6048cffc3615qcb03n9k.png');
			background-size: contain;
		}

		.record {
			width: 690rpx;
			border-radius: 20rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			margin: 20rpx auto;
			padding-top: 20rpx;
			border: #DBDBDB solid 0.5rpx;

			.title {
				width: 320rpx;
				margin-top: 28rpx;
				margin-left: 41rpx;
				display: flex;

				text {
					text-align: center;
				}

				img {
					width: 39rpx;
					height: 38rpx;
					margin-right: 18rpx;
				}
			}

			.menstrual {
				height: 97rpx;
				border-bottom: #DBDBDB solid 0.5rpx;
				display: flex;
				flex-direction: row;

				.message {
					display: flex;
					flex-direction: column;
					width: 100rpx;
					height: 50rpx;
					margin: 25rpx auto;

					// width: 50rpx;
					// height: 20rpx;
					.no {
						width: 85rpx;
						height: 50rpx;
						border-radius: 18rpx;
						background-color: #DBDBDB;
						color: #FFFFFF;
					}

					.yes {
						width: 85rpx;
						height: 50rpx;
						border-radius: 18rpx;
						background: #F86853;
						color: #FFFFFF;
					}
				}
			}

			.flow {
				height: 89rpx;
				display: flex;
				border-bottom: #DBDBDB solid 0.5rpx;

				.radio {
					display: grid;
					grid-template-rows: 64rpx;
					grid-template-columns: 1fr 1fr 1fr;
				}

				.message {
					width: 53%;

					.slider {
						margin-top: 10rpx;
					}
				}
			}

			.color {
				height: 89rpx;
				border-bottom: #DBDBDB solid 0.5rpx;
				display: flex;
				flex-direction: row;

				.message {
					display: flex;
					flex-direction: row;

					// margin: 28rpx ;
					// width: 50rpx;
					// height: 20rpx;
					.coloritem {
						display: flex;
						flex-direction: row;
						margin: auto;
						margin-right: 18rpx;

						.colorCheck {
							background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/28/454ea8a859c04ceba606d2157b684c4bhhz8fit8zk.png');
							background-repeat: no-repeat;
							background-size: 70% 70%;
							background-position: center;
						}

						.colorValue {
							width: 45rpx;
							background-color: #EA686B;
							height: 45rpx;
							border-radius: 50%;
						}
					}
				}
			}

			.dysmenorrhea {
				height: 89rpx;
				border-bottom: #DBDBDB solid 0.5rpx;
				display: flex;
				flex-direction: row;

				.message {
					display: flex;
					flex-direction: row;

					// margin: 28rpx ;
					// width: 50rpx;
					// height: 20rpx;
					.dysmenorrheaitem {
						display: flex;
						position: relative;
						flex-direction: row;
						margin: auto;
						margin-right: 24rpx;

						.dysmenorrheaitemCheck {
							background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/28/23dedafd556b41e288750f0df9c4e31arqsg753xct.png');
							background-repeat: no-repeat;
							position: absolute;
							width: 47rpx;
							background-size: 100% 100%;
							height: 50rpx;
							top: 2rpx;
							left: -1rpx;
						}
					}

				}
			}

			.feeling {
				height: 280rpx;
				border-bottom: #DBDBDB solid 0.5rpx;
				display: flex;
				flex-direction: column;

				.message {
					margin: 28rpx;
					// width: 50rpx;
					// height: 20rpx;
					// border: 1px solid black;
					// border-radius: 15rpx;
					display: flex;
					justify-content: center;

					textarea {
						width: 530rpx;
						height: 150rpx;
						border: 1px solid #DBDBDB;
						border-radius: 15rpx;
					}
				}
			}

			.form {
				display: flex;
				justify-content: center;

				button {
					width: 160rpx;
					background-color: #f86878;
					height: 60rpx;
					margin: 20rpx;
					color: #fff;
					padding: 5rpx;
					border-radius: 50rpx;
				}
			}
		}

		uni-picker-view {
			display: block;
		}

		uni-picker-view .uni-picker-view-wrapper {
			display: flex;
			position: relative;
			overflow: hidden;
			height: 100%;
			background-color: white;
		}

		uni-picker-view[hidden] {
			display: none;
		}

		picker-view {
			width: 100%;
			// height: 600upx;
			height: 400rpx;
			margin-top: 20upx;
		}

		.item {
			line-height: 100upx;
			text-align: center;
		}
	}
</style>